<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            margin-left: 300px;
            margin-top: 100px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 模拟从后台拿到的数据
        var datas = [
            {
                name: "传智播客",
                url: "http://www.itcast.cn",
                type: "IT最强培训机构",
                rank:"No.1"
            },
            {
                name: "黑马程序员",
                url: "http://www.itheima.com",
                type: "大学生IT培训机构",
                rank:"No.2"
            },
            {
                name: "传智前端学院",
                url: "http://web.itcast.cn",
                type: "前端的黄埔军校",
                rank:"No.3"
            }];

        //页面加载后,点击按钮,遍历数组,获取数组中的元素内容,创建行和列,加入到表格中的tbody中
        $(function () {
            $("#btnCreate").click(function () {
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    /*var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    $("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>").appendTo($("#tbd"));*/
                    $("<tr><td><a href="+datas[i].url+">"+datas[i].name+"</a></td><td>"+datas[i].type+"</td></tr>").appendTo($("#tbd"))
                }
            });
        });

        $(function () {
            $("#btnCreate").click(function () {
                var arr=[];
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    arr.push('<tr><td><a href='+obj.url+'>'+obj.name+'</a></td>      <td>'+obj.type+'</td><td>'+obj.rank+'</td></tr>');
                }
                $("#tbd").html(arr);
            });
        });
    </script>
</head>

<body>
<input type="button" value="获取数据" id="btnCreate"/>
<div>
    <table>
        <thead>
        <tr>
            <th>名称</th>
            <th>说明</th>
            <th>权限</th>
        </tr>
        </thead>
        <tbody id="tbd">
        <tr>
            <td><a href="javascript:">传智播客 </a></td>
            <td>IT最强培训机构</td>
            <td>No.1</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

</html>
